<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="业务员业绩"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-tabs v-model="active" @click="onChangePhTab">
      <van-tab title="日排行">
        <div style="margin: 5px;">
           <van-cell title="选择缴费日期" required v-model="date" @click="onDisplay1" is-link />
        </div>
        <van-calendar v-model="dateshow" @close="onClose" @confirm="onConfirm" :show-confirm="kjflag"  :min-date="minDate"/>
        <div style="margin: 5px;">
          <van-cell title="选择部门：" required v-model="deptname" @click="showDept" is-link />
        </div>

        <div class="box">
          <div class="rownr">
            <div style="width: 10%;text-align: center;padding:5px 0 ;">排名</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding:5px 0 ;">姓名</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ;">业绩</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ;">新开</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ;">续费</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ;">本周</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ;">本月</div>
          </div>
          <div v-for="item in rphList " :key="item.index"  >
            <div :class="item.index%2 == 0 ? 'rownr1':'rownr' " >
              <div style="width: 10%;text-align: center;padding:5px 0 ;">{{item.index}}</div>
              <div style="width: 20%;text-align: center;padding:5px 0 ;">{{item.ywyname}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;">{{item.total}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;">{{item.xkTotal}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;">{{item.xfTotal}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;color: red;">{{item.weekWcl}}%</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;color: red;">{{item.totalWcl}}%</div>
            </div>
          </div>
        </div>

      </van-tab>
      <van-tab title="月排行">
        <div style="margin: 5px;">
          <van-cell title="选择月份" required v-model="ssyf" @click="onDisplay2" is-link />
        </div>
        <div style="margin: 5px;">
          <van-cell title="选择部门：" required v-model="deptname" @click="showDept" is-link />
        </div>
        <van-popup v-model="ssyfshow" round position="bottom" :style="{ height: '50%' }" >
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="onConfirmNy1"
            @cancel="oncancel1"
          />
        </van-popup>
        <div class="box">
          <div class="rownr">
            <div style="width: 10%;text-align: center;padding:5px 0 ; ">排名</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding:5px 0 ; ">姓名</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ; ">业绩</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ; ">新开</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ; ">续费</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ; ">任务</div>
            <div class="shuxian"></div>
            <div style="width: 15%;text-align: center;padding:5px 0 ; ">完成率</div>

          </div>
          <div  v-for="item in yphList " :key="item.index"  >
            <div :class="item.index%2 == 0 ? 'rownr1':'rownr' "  >
              <div style="width: 10%;text-align: center;padding:5px 0 ; ">{{item.index}}</div>
              <div style="width: 20%;text-align: center;padding:5px 0 ; ">{{item.ywyname}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;">{{item.total}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;">{{item.xkTotal}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;">{{item.xfTotal}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;;">{{item.taskNum}}</div>
              <div style="width: 15%;text-align: center;padding:5px 0 ;color: red;">{{item.totalWcl}}%</div>
           </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="周排行">
        <div style="margin: 5px;">
          <van-cell title="选择月份" required v-model="ssyf2" @click="onDisplay3" is-link />
        </div>
        <div style="margin: 5px;">
          <van-cell title="选择部门：" required v-model="deptname" @click="showDept" is-link />
        </div>
        <van-popup v-model="ssyfshow2" round position="bottom" :style="{ height: '50%' }" >
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="onConfirmNy2"
            @cancel="oncancel2"
          />
        </van-popup>
        <van-tabs v-model="weekActive" @click="onChangeWeekTab">
          <van-tab title="第一周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding:5px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">姓名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">新开</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">续费</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">任务</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">完成率</div>
              </div>
              <div  v-for="item in weekList " :key="item.index"  >
                <div :class="item.index%2 == 0 ? 'rownr1':'rownr' "  >
                  <div style="width: 10%;text-align: center;padding: 5px ;">{{item.index}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.ywyname}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.total}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xkTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xfTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: #20a0ff;">{{item.taskNum}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: red;">{{item.weekWcl}}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="第二周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding:5px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">姓名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">新开</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">续费</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">任务</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">完成率</div>
              </div>
              <div  v-for="item in weekList " :key="item.index"  >
                <div :class="item.index%2 == 0 ? 'rownr1':'rownr' "  >
                  <div style="width: 10%;text-align: center;padding: 5px ;">{{item.index}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.ywyname}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.total}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xkTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xfTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: #20a0ff;">{{item.taskNum}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: red;">{{item.weekWcl}}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="第三周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding:5px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">姓名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">新开</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">续费</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">任务</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">完成率</div>
              </div>
              <div  v-for="item in weekList " :key="item.index"  >
                <div :class="item.index%2 == 0 ? 'rownr1':'rownr' "  >
                  <div style="width: 10%;text-align: center;padding: 5px ;">{{item.index}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.ywyname}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.total}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xkTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xfTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: #20a0ff;">{{item.taskNum}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: red;">{{item.weekWcl}}%</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="第四周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding:5px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">姓名</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">新开</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">续费</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">任务</div>
                <div class="shuxian"></div>
                <div style="width: 15%;text-align: center;padding:5px 0 ; ">完成率</div>
              </div>
              <div  v-for="item in weekList " :key="item.index"  >
                <div :class="item.index%2 == 0 ? 'rownr1':'rownr' "  >
                  <div style="width: 10%;text-align: center;padding: 5px ;">{{item.index}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.ywyname}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.total}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xkTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;">{{item.xfTotal}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: #20a0ff;">{{item.taskNum}}</div>
                  <div style="width: 15%;text-align: center;padding: 5px ;color: red;">{{item.weekWcl}}%</div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>

      <van-tab title="年排行">
        <div style="margin: 5px;">
          <van-cell title="选择年份" >
            <van-stepper v-model="ssnf" @change="onChangeSsnf"/>
          </van-cell>
        </div>
        <div style="margin: 5px;">
          <van-cell title="选择部门：" required v-model="deptname" @click="showDept" is-link />
        </div>
        <van-popup v-model="ssyfshow" round position="bottom" :style="{ height: '50%' }" >
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="onConfirmNy1"
            @cancel="oncancel1"
          />
        </van-popup>
        <div class="box">
          <div class="rownr">
            <div style="width: 20%;text-align: center;padding: 5px 0 ;">排名</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 5px 0 ;">姓名</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 5px 0 ;">业绩</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 5px 0 ;">新开</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 5px 0 ;">续费</div>
          </div>
          <div  v-for="item in nphList " :key="item.index"  >
            <div :class="item.index%2 == 0 ? 'rownr1':'rownr' "  >
              <div style="width: 20%;text-align: center;padding: 5px 0 ;">{{item.index}}</div>
              <div style="width: 20%;text-align: center;padding: 5px 0 ;">{{item.ywyname}}</div>
              <div style="width: 20%;text-align: center;padding: 5px 0; color: red">{{item.total}}</div>
              <div style="width: 20%;text-align: center;padding: 5px 0; color: red">{{item.xkTotal}}</div>
              <div style="width: 20%;text-align: center;padding: 5px 0; color: red">{{item.xfTotal}}</div>
            </div>
          </div>
        </div>
      </van-tab>

    </van-tabs>

    <van-action-sheet v-model="deptshow" :actions="deptactions" @select="onSelectDept" />

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { addAchievements, queryUserInfo, queryDeptBusiTask, updateBusitask, queryYwyAchievements, queryMonthRanking, queryWeekRanking, getProvinceList, queryYearRanking } from '../../api/api'

export default {
  name: 'YwyAchieveMents',
  data() {
    return {
      date: '',
      show: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: '',
      ywyname: '',
      currentDate: new Date(),
      postList: [],
      mbtask: 0,
      ybtask: 0,
      busiTaskList: [],
      tkshow: false,
      rqshow: true,
      kjflag: false,
      ssyfshow: false,
      rphList: [],
      yphList: [],
      nphList: [],
      ssyf2: '',
      ssyf: '',
      ssyfshow2: false,
      weekflag: '1',
      weekList: [],
      deptshow: false,
      deptid: '',
      deptname: '',
      deptactions: [{ id: '', name: '全部' }],
      active: 0,
      weekActive: 0,
      ssnf: ''
    }
  },

  created() {
    var dateNow = new Date()
    var year = dateNow.getFullYear() + ''
    var month = (dateNow.getMonth() + 1) + ''
    var day = dateNow.getDate() + ''
    var date = year + (month < 10 ? '-0' : '-') + month + '-' + day
    var ssyf = year + (month < 10 ? '0' : '') + month
    this.date = date
    this.ssyf = ssyf
    this.ssyf2 = ssyf
    this.ywyname = this.$store.getters.userName
    this.queryUserInfo()
    this.ssnf = year
    // this.queryYwyAchievements()
    this.getProvinceList()
  },
  mounted() {

  },

  methods: {

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay1() {
      this.dateshow = true
    },

    onDisplay2() {
      this.ssyfshow = true
    },

    onDisplay3() {
      this.ssyfshow2 = true
    },

    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryYwyAchievements()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
          this.queryYwyAchievements()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    getProvinceList() {
      const param = {}
      getProvinceList(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const provinceList = response.rows
          if (provinceList) {
            for (var i = 0; i < provinceList.length; i++) {
              const temp = { id: provinceList[i].deptId, name: provinceList[i].deptName }
              this.deptactions.push(temp)
            }
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    oncancel() {
      this.dateshow = false
    },

    oncancel1() {
      this.ssyfshow = false
    },

    oncancel2() {
      this.ssyfshow2 = false
    },

    onConfirmNy1(event) {
      console.log(event)
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.ssyf = date
      this.ssyfshow = false
      this.queryMonthRanking()
    },

    onConfirmNy2(event) {
      console.log(event)
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.ssyf2 = date
      this.ssyfshow2 = false
      this.queryWeekRanking()
    },

    queryYwyAchievements() {
      const param = {}
      const userid = this.$store.getters.userId
      const date = this.date
      param.startDate = date
      param.endDate = date
      param.deptid = this.deptid
      queryYwyAchievements(param).then(response => {
        if (response.code === 200) {
          if (response.data) {
            let rphList = []
            rphList = response.data.achDetailDTOList
            for (var i = 0; i < rphList.length; i++) {
              rphList[i].index = i + 1
            }
            this.rphList = rphList
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryYearRanking() {
      const param = {}
      const userid = this.$store.getters.userId
      param.ssnf = this.ssnf
      param.deptid = this.deptid
      queryYearRanking(param).then(response => {
        if (response.code === 200) {
          if (response.data) {
            let nphList = []
            nphList = response.data.achDetailDTOList
            for (var i = 0; i < nphList.length; i++) {
              nphList[i].index = i + 1
            }
            this.nphList = nphList
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onChangePhTab(event) {
      console.log(event)
      if (event == 1) {
        this.queryMonthRanking()
      }
      if (event == 2) {
        this.queryWeekRanking()
      }
      if (event == 0) {
        this.queryYwyAchievements()
      }
      if (event == 3) {
        this.queryYearRanking()
      }
    },

    onChangeSsnf(e) {
      this.ssnf = e
      this.queryYearRanking()
    },

    onChangeWeekTab(event) {
      console.log(event)
      if (event == 0) {
        this.weekflag = '1'
        this.queryWeekRanking()
      }
      if (event == 1) {
        this.weekflag = '2'
        this.queryWeekRanking()
      }
      if (event == 2) {
        this.weekflag = '3'
        this.queryWeekRanking()
      }
      if (event == 3) {
        this.weekflag = '4'
        this.queryWeekRanking()
      }
    },

    queryMonthRanking() {
      const param = {}
      param.ssyf = this.ssyf
      param.deptid = this.deptid
      queryMonthRanking(param).then(response => {
        if (response.code === 200) {
          if (response.data) {
            let yphList = []
            yphList = response.data.achDetailDTOList
            for (var i = 0; i < yphList.length; i++) {
              yphList[i].index = i + 1
            }
            this.yphList = yphList
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryWeekRanking() {
      const param = {}
      param.ssyf = this.ssyf2
      param.weekflag = this.weekflag
      param.deptid = this.deptid
      queryWeekRanking(param).then(response => {
        if (response.code === 200) {
          if (response.data) {
            let weekList = []
            weekList = response.data.achDetailDTOList
            for (var i = 0; i < weekList.length; i++) {
              weekList[i].index = i + 1
            }
            this.weekList = weekList
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    showDept() {
      this.deptshow = true
    },

    onSelectDept(item) {
      this.deptid = item.id
      this.deptname = item.name
      this.deptshow = false
      if (this.active == 0) {
        this.queryYwyAchievements()
      }
      if (this.active == 1) {
        this.queryMonthRanking()
      }
      if (this.active == 2) {
        this.queryWeekRanking()
      }
      if (this.active == 3) {
        this.queryYearRanking()
      }
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: #F0F4FE;
  }

  .navclass{
    background-color:#ffffff;
  }

  .box{
    background-color: #ffffff;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .shuxian{
    width: 1px;
    height: 15px;
    line-height:10px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 5px;
  }

  .mubiao{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    right: 20px;
    position: fixed;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
  }

  .rownr1{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    background-color: #F0f4f9;
  }

  .quyu{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .fenge{
    width: 1px;
    height: 40px;
    line-height:20px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
  }

  .yuangong{
    padding-bottom: 10px;
    margin:5px;
    width: 95%;
    height: auto;
    background-color: #F8FBFD;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
  }
</style>
